<template>
    <div>
        <div class="box_bg">
            <h2 class="box_tit">
                <i class="icon icon1"></i>资源管理
                <i class="reti"></i>
            </h2>
            <!-- <div class="blank20"></div> -->
            <div class="handBox">
              <a href="javascript:void(0);" class="btns add"  @click="addLayer(['menuMaintain',0,'menu'])">增加根级菜单</a>
            </div>
            <v-treeTable :resourceData='resourceData' @editLayer="editLayer" @addLayer="addLayer" @delLayer="delLayer"></v-treeTable>
            <!-- 弹层开始 -->
            <div v-show="isLayer">
                <div id="mask" v-bind:style="{ width: fullWidth + 'px', height: fullHeight + 'px' }"></div>
                <div id="menuMaintain" v-show="types === 'menuMaintain'">
                    <strong class="strongs" @click="handleLayer"></strong>
                    <div class="title" v-show="currentType == 'add'" >菜单添加</div>
                    <div class="title" v-show="currentType == 'edit'">资源修改</div>

                    <el-form ref="menuMaintain" :model="menuMaintain" :rules="rules.menuMaintain" label-width="105px">
                        <el-form-item label="菜单名称：" prop="resourceName">
                            <el-input v-model.trim="menuMaintain.resourceName" placeholder="请填写菜单名称"></el-input>
                        </el-form-item>
                        <el-form-item label="资源链接：" prop="url">
                            <el-input v-model.trim="menuMaintain.url" placeholder="请填写资源链接"></el-input>
                        </el-form-item>
                        <el-form-item label="权限：" prop="permission">
                            <el-input v-model.trim="menuMaintain.permission" placeholder="请填写权限"></el-input>
                        </el-form-item>
                        <el-form-item label="Icon图标：">
                            <el-input v-model.trim="menuMaintain.icon" placeholder="请填写Icon图标"></el-input>
                        </el-form-item>
                        <el-form-item label="排序号：" prop="priority">
                            <el-input v-model.trim="menuMaintain.priority" placeholder="请填写排序号"></el-input>
                        </el-form-item>
                    </el-form>

                    <div class="T-fotters">
                        <div class="queDing" v-show="currentType == 'add'"  @click="addSubmit('menuMaintain',$event)">确定</div>
                        <div class="queDing" v-show="currentType == 'edit'"  @click="editSubmit('menuMaintain',$event)">确定</div>
                        <div class="qvXiao" @click="handleLayer">取消</div>
                    </div>
                </div>

                <!-- 目录维护 directoryMaintain 弹层
                <div id="directoryMaintain" v-show="types === 'directoryMaintain'">
                    <strong class="strongs" @click="handleLayer"></strong>
                    <div class="title" v-show="currentType == 'add'" >目录维护</div>
                    <div class="title" v-show="currentType == 'edit'">目录添加</div>
                    <span class="span1">目录名称：</span><input type="text" value="请输入名称" v-model="directoryMaintain.resourceName"/><br/>
                    <span >优先级：</span><input type="text" value="" v-model="directoryMaintain.resourceName"/><br/>
                    <span >Icon：</span><input type="text" value="" v-model="directoryMaintain.icon"/><br/>
                    <span >资源链接：</span><input type="text" value="" v-model="directoryMaintain.url"/><br/>
                    <div class="T-fotters">
                        <div class="queDing" v-show="currentType == 'add'"  @click="addSubmit">确定</div>
                        <div class="queDing" v-show="currentType == 'edit'" @click="editSubmit">确定</div>
                        <div class="qvXiao" @click="handleLayer">取消</div>
                    </div>
                </div>-->

                <!-- 按钮维护 resourcesMaintain -->
                <div id="resourcesMaintain" v-show="types === 'resourcesMaintain'">
                    <strong class="strongs" @click="handleLayer"></strong>
                    <div class="title" v-show="currentType == 'add'" >按钮添加</div>
                    <div class="title" v-show="currentType == 'edit'">资源修改</div>

                    <el-form ref="resourcesMaintain" :model="resourcesMaintain" :rules="rules.resourcesMaintain" label-width="105px">
                        <el-form-item label="按钮名称：" prop="resourceName">
                            <el-input v-model.trim="resourcesMaintain.resourceName" placeholder="请填写按钮名称"></el-input>
                        </el-form-item>
                        <el-form-item label="资源链接：" prop="url">
                            <el-input v-model.trim="resourcesMaintain.url" placeholder="请填写资源链接"></el-input>
                        </el-form-item>
                        <el-form-item label="权限：" prop="permission">
                            <el-input v-model.trim="resourcesMaintain.permission" placeholder="请填写权限"></el-input>
                        </el-form-item>
                        <el-form-item label="排序号：" prop="priority">
                            <el-input v-model.trim="resourcesMaintain.priority" placeholder="请填写排序号"></el-input>
                        </el-form-item>
                    </el-form>


                    <!-- <span class="span1">按钮名称：</span><input type="text" value="请输入名称" v-model="resourcesMaintain.resourceName"/><br/>
                    <span >优先级：</span><input type="text" value="" v-model="resourcesMaintain.priority"/><br/>
                    <span >权限：</span><input type="text" value="" v-model="resourcesMaintain.permission"/><br/>
                    <span >资源链接：</span><input type="text" value="" v-model="resourcesMaintain.url"/><br/> -->
                    <div class="T-fotters">
                        <div class="queDing"  v-show="currentType == 'add'"  @click="addSubmit('resourcesMaintain',$event)">确定</div>
                        <div class="queDing"  v-show="currentType == 'edit'" @click="editSubmit('resourcesMaintain',$event)">确定</div>
                        <div class="qvXiao" @click="handleLayer">取消</div>
                    </div>
                </div>

                <!-- 删除 -->
                <div id="box" v-show="types === 'del'">
                    <strong class="strongs" @click="handleLayer"></strong>
                    <div class="title">提示框</div>
                    <div class="oNav">
                        <div class="div1">
                            <div class="div11" style=""></div>
                            <div class="div12">
                                <h2>是否删除</h2>
                                <span>如果是请点击确定，不是请点击取消退出</span>
                            </div>
                        </div>
                    </div>
                    <div class="layerbtn">
                        <el-button class="btns" @click='delSubmit' type="text" size="small">确定</el-button>
                        <el-button  class="btns cancel" @click="handleLayer" type="text" size="small">取消</el-button>
                    </div>
                    <!-- <div class="isYes" @click="delSubmit">确定</div>
                    <div class="isNo" @click="handleLayer">取消</div> -->
                </div>
            </div>
            <!-- 弹层结束 -->
        </div>
    </div>
</template>

<script>
const vTreeTable = resolve => require(["../../common/TreeTable.vue"], resolve);
import {
  resourceUrl,
  resourceAddUrl,
  resourceListUrl,
  resourceIdUrl
} from "../../../axios/api.js";
export default {
  data() {
    return {
      isLayer: false,
      isDel:null,
      types: "",
      resourceData: [],
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight,
      currentId: "",
      currentType: "",
      menuMaintain: {
        resourceName: null,
        type: null,
        id: null,
        parentId: null,
        permission: null,
        icon: null,
        priority:1,
        url: null
      },
      /*directoryMaintain: {
        resourceName: null,
        type: null,
        id: null,
        parentId: null,
        permission: null,
        priority:5,
        icon: null,
        url: null
      },*/
      resourcesMaintain: {
        resourceName: null,
        type: null,
        id: null,
        parentId: null,
        permission: null,
        priority:1,
        url: null
      },
      flag: true, //禁止重复提交的开关
      rules:{
        menuMaintain:{
            resourceName: [
                { required: true, message: '请输入菜单名字', trigger: 'blur' },
                { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
            ],
            url: [
                { required: true, message: '请输入资源链接', trigger: 'blur' },
                { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
            ],
            priority: [
                { type:'number', message: '请输入数字', trigger: 'blur',
                    transform(value){
                        if(!isNaN(value)){
                            value = Number(value)
                            return value;
                        }
                        return "";
                    }
                }
            ],
        },
        resourcesMaintain:{
            resourceName: [
                { required: true, message: '请填写按钮名称', trigger: 'blur' },
                { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
            ],
            url: [
                { required: true, message: '请输入资源链接', trigger: 'blur' },
                { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
            ],
            priority: [
                { type:'number', message: '请输入数字', trigger: 'blur',
                    transform(value){
                        if(!isNaN(value)){
                            value = Number(value)
                            return value;
                        }
                        return "";
                    }
                }
            ],
        }
      }
    };
  },
  mounted() {
    // 初始化进入或者刷新
    let self = this;
    self.axios({
        method: "get",
        url: resourceListUrl
      })
      .then(function(response) {
        self.resourceData = response.data.data;
      })
  },
  methods: {
    //获得资源列表
    getResource() {
      let self = this;
      self
        .axios({
          method: "get",
          url: resourceListUrl
        })
        .then(function(response) {
          self.resourceData = response.data.data;
        })
    },
    handleCurrentChange(val) {
        // 点击分也是 调用列表
        this.page.currentPage = val;
        this.getResource(this.page.currentPage);
    },
    //关闭
    handleLayer() {
      this.isLayer = !this.isLayer;
      this.menuMaintain.resourceName = null;
      this.menuMaintain.url = null;
      this.menuMaintain.priority = null;

      this.resourcesMaintain.resourceName = null;
      this.resourcesMaintain.url = null;
      this.resourcesMaintain.priority = null;


      // 错误提示
      // $(".el-form-item").each(function(){
      //   $(this).removeClass('is-error')
      // });
      // $(".el-form-item__error").remove();
      // this.resourcesMaintain = {};
      /*this.menuMaintain =  eval('(' + "menuMaintain: {resourceName:'',type:'',id:'',parentId:'',permission:'',icon:'',priority:'1',url:''}"+')');
      this.resourcesMaintain =  eval('(' + "resourcesMaintain: {resourceName:'',type:'',id:'',parentId:'',permission:'',priority:'1',url:''}"+')');*/
    },
    //编辑弹层操作
    /*editLayer(arr){
            this.isLayer = !this.isLayer;
            this.types = arr[0];
            // if(arr[0]=='menuMaintain'){
            //     console.log('menuMaintain');
            // }else if(arr[0]=='directoryMaintain'){
            //     console.log('directoryMaintain');
            // }else if(arr[0]=='resourcesMaintain'){
            //     console.log('resourcesMaintain');
            // }
            // 判断是否编辑
            if(arr[1]){
                this.editObject = arr[1];
            }
        },*/
    // 增加弹层
    addLayer(arr) {
      this.isLayer = !this.isLayer;
      this.types = arr[0]; //获取是哪个弹层
      this.currentType = "add";

      //内容赋值
      if (arr[0] == "menuMaintain") {
        this.menuMaintain.parentId = arr[1];
        this.menuMaintain.type = arr[2];
      }else if (arr[0] == "resourcesMaintain") {
        this.resourcesMaintain.parentId = arr[1];
        this.resourcesMaintain.type = arr[2];
      }/* else if (arr[0] == "directoryMaintain") {
        this.directoryMaintain.parentId = arr[1];
        this.directoryMaintain.type = arr[2];
      } */

    },
    // 编辑弹层
    editLayer(arr) {
      this.isLayer = !this.isLayer;
      this.types = arr[0]; //获取是哪个弹层
      this.currentType = "edit";
      //内容赋值
      if (arr[0] == "menuMaintain") {
          this.menuMaintain.resourceName = arr[1].resourceName,
          this.menuMaintain.type = arr[1].type,
          this.menuMaintain.priority = arr[1].priority,
          this.menuMaintain.permission = arr[1].permission,
          this.menuMaintain.url = arr[1].url;
      } else if (arr[0] == "resourcesMaintain") {
        console.log(arr[1].priority);
          this.resourcesMaintain.resourceName = arr[1].resourceName,
          this.resourcesMaintain.type = arr[1].type,
          this.resourcesMaintain.priority = arr[1].priority,
          this.resourcesMaintain.permission = arr[1].permission
          this.resourcesMaintain.url = arr[1].url;
      } /*else if (arr[0] == "directoryMaintain") {
        (this.directoryMaintain.resourceName = arr[1].resourceName),
          (this.directoryMaintain.type = arr[1].type),
          (this.directoryMaintain.permission = arr[1].permission),
          (this.directoryMaintain.icon = arr[1].icon);
        this.directoryMaintain.url = arr[1].url;
      }*/

      this.currentId = arr[1].id;
    },
    refreshLocalStrorage() {
      let self = this;
      self
        .axios({
          method: "get",
          url: self.axios.defaults.baseURL + "/resource"
        })
        .then(function(response) {
          //1.删除之前的 localStrorage
          localStorage.removeItem("menuList")
          let obj = response.data.data;
          //2.请求成功以后重新存储到 localStrorage 中
          localStorage.setItem("menuList", JSON.stringify(obj));
          //3.刷新当前路由
          window.location.reload(true);
          // self.$router.push("/systems/resource");
        })
    },
    // 删除
    delLayer(arr) {
      if(arr[2]){
        this.$message({
          duration: 2000,
          message: "因此菜单有子集，不能删除！！",
          center: true,
          type: "error"
        });
      }else{
        this.isLayer = !this.isLayer;
        this.types = arr[0]; //获取是哪个弹层
        this.currentId = arr[1];
      }

    },

    //确认提交-----增加一项
    addSubmit(formName,event) {
        // 表单验证
        this.$refs[formName].validate(valid => {
            if (valid) {
                let self = this;
                let currentData = {}; // 提交时使用的数据

                if (self.types == "menuMaintain") {
                    currentData = self.menuMaintain;
                } else if (self.types == "resourcesMaintain") {
                    currentData = self.resourcesMaintain;
                }/* else if (self.types == "directoryMaintain") {
                currentData = self.directoryMaintain;
                }*/

                if (self.flag) {
                    self.flag = false;
                    window.setTimeout(timing, 5000);
                    function timing() {
                    self.flag = true;
                }
                self.axios({
                    method: "post",
                    url: resourceAddUrl,
                    data: currentData
                })
                .then(function(response) {
                    //关闭弹层
                    self.handleLayer();
                    // 提示信息
                    if (response.data.success) {
                    //修改资源管理后 重新 localStrorage 赋值
                    self.refreshLocalStrorage();
                    // 刷新列表
                    // self.getResource();
                    } else {
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: "error"
                        });
                        }
                    })
                } else {
                    alert("请不要重复提交。");
                }
            }else{
                return false;
            }
        });
    },
    //确认提交-----编辑一项
    editSubmit(formName,event) {
        // 表单验证
        this.$refs[formName].validate(valid => {
            if (valid) {
                let self = this;
                let currentData = {}; // 提交时使用的数据

                if (self.types == "menuMaintain") {
                    currentData = self.menuMaintain;
                } else if (self.types == "directoryMaintain") {
                    currentData = self.directoryMaintain;
                } else if (self.types == "resourcesMaintain") {
                    currentData = self.resourcesMaintain;
                }
                delete currentData.parentId;
                delete currentData.id;

                self.axios({
                    method: "put",
                    url: resourceIdUrl + self.currentId,
                    data: currentData
                })
                .then(function(response) {
                    //关闭弹层
                    self.handleLayer();
                    // 提示信息
                    if (response.data.success) {
                        //修改资源管理后 重新 localStrorage 赋值
                        self.refreshLocalStrorage();
                        // 刷新列表
                        self.getResource();
                    } else {
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: "error"
                        });
                    }
                })
          }else{
            return false;
          }
        });
    },
    // 确认删除----删除一项
    delSubmit(arr) {
      let self = this;
        self.axios({
            method: "delete",
            url: resourceIdUrl + self.currentId
          })
          .then(function(response) {
            //关闭弹层
            self.handleLayer();
            // 提示信息
            if (response.data.success) {
              //修改资源管理后 重新 localStrorage 赋值
              self.refreshLocalStrorage();
              // 刷新列表
              self.getResource();

            } else {
              self.$message({
                duration: 1000,
                message: response.data.msg,
                center: true,
                type: "error"
              });
            }
          })
    }
  },
  components: {
    vTreeTable
  }
};
</script>
<style scoped>
  .handBox{ text-align: right; overflow: hidden; margin-bottom: 10px; }
</style>